<template>
  <d2-container>
  <div class="app-container">
    <el-container :style="'height:'+containerHeight+'px'">
      <el-main class="theme-front-color">
        <div class="search" v-if="search">
            <el-form label-position="right" :model="dataForm" :inline="true">
                <el-form-item class="el-form-item--mini">
                  <el-input placeholder="请选择区域信息"
                    style="width: 250px;"
                    class="filter-item"
                    size="mini"
                    :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"
                    @click.native="deptogglePanel($event)"
                    v-model="currentbuildInfo.buildingName">
                    <template slot="prepend">区域选择</template>
                  </el-input>
                  <div v-show="showTree" class="objectTree w-160" ref="suoShuMenTree">
                    <el-tree
                        :style="'height:'+containerHeight+'px'"
                        ref="buildTree"
                        highlight-current
                        node-key="buildingId"
                        :check-on-click-node="true"
                        :check-strictly="true"
                        show-checkbox
                        :data="dataList"
                        :expand-on-click-node="false"
                        :props="menuListTreeProps"
                        @check-change="selectBuild"
                        default-expand-all
                      ></el-tree>
                  </div>
                </el-form-item>
                <el-form-item class="el-form-item--mini">
                  <el-radio-group v-model="dataForm.dateType" size="mini">
                    <el-radio-button :label="item.date" v-for="(item, index) in Config.searchDate" :key="index">
                      {{item.label}}
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="日期" label-width="40px" class="el-form-item--mini">
                  <el-date-picker
                    v-model="dataForm.date"
                    placeholder="时间范围"
                    style="width: 200px;"
                    class="filter-item"
                    size="mini"
                    :picker-options="pickerOptions"
                    :type="dataForm.dateType"
                    suffix-icon="el-icon-date"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    @keyup.enter.native="getPowerDataList"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="el-form-item--mini">
                  <el-select v-model="dataForm.energyType"  style="width: 100px;" placeholder="请选择"  size="mini">
                    <el-option
                      v-for="(item, index) in meterTypeList" :key="index"
                      :label="item.paramValue"
                      :value="item.paramKey">
                    </el-option>
                  </el-select>
                  </el-form-item>
<!--                <el-form-item class="el-form-item&#45;&#45;mini">
                  <el-button-group>
                    <el-button v-if="showchart" size="mini" icon="el-icon-menu" @click="changeShowType">表格</el-button>
                    <el-button v-else size="mini" icon="el-icon-picture" @click="changeShowType">图表</el-button>
                  </el-button-group>
                </el-form-item>-->
                <el-form-item class="el-form-item--mini">
                  <el-button
                    class="filter-item"
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getPowerDataList"
                  >查询</el-button>
<!--                  <el-button
                      class="filter-item"
                      type="primary"
                      icon="el-icon-download"
                      size="mini"
                      @click="exoprtData"
                  >导出</el-button>-->
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-top:20px;" v-show="showchart">
          <el-row :span="24">
            <el-col :span="6" ref="typeUnit">
              <el-row :gutter="12">
                <el-col :span="12" v-for="ele in powerList" :key="ele.itemValue">
                  <el-card shadow="hover" style="margin-bottom:5px;">
                    <div class="type-card">
                      <div>{{ele.itemName}}</div>
                      <div class="num">{{ele.totalVal}}</div>
                      <div>{{currentUnit}}</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="18" style="margin-top: 10px">
              <div id="typeDetailChart" class="busi-chart" :style="'height:'+bottomChartHeight/2+'px'"></div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top:20px;" v-show="showchart">
          <el-row :span="24" class="range-search">
            <div style="float:right; text-algin:right;margin:0px 0px;">
              <el-select v-model="dataForm.subEnergyType"  style="width: 150px;" placeholder="请选择"  size="mini">
                <el-option
                  v-for="(item, index) in meterTypeParamValueList" :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </el-row>
          <el-row :span="24">
             <el-col :span="6">
              <div id="departChart" class="busi-chart" :style="'height:'+bottomChartHeight/2+'px;'"></div>
            </el-col>
            <el-col :span="18">
              <div id="statEchart" class="busi-chart" :style="'height:'+bottomChartHeight/2+'px;'"></div>
            </el-col>
          </el-row>

        </div>
        <div style="margin-top:20px;" v-show="!showchart">
          <el-table
            :data="meterdataList"
            border
            :height="bottomChartHeight+70"
            v-loading="dataListLoading"
            style="width: 100%;"
          >
            <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
            <el-table-column prop="id" header-align="center" width="70px" align="center" label="序号"></el-table-column>
            <el-table-column
              prop="buildingName"
              header-align="center"
              align="center"

              label="区域名称"
            ></el-table-column>
            <el-table-column
              prop="energyTypeName"
              header-align="center"
              align="center"
              label="分类"
            ></el-table-column>
            <el-table-column
              prop="subEnergyTypeName"
              header-align="center"
              align="center"

              label="分项"
            ></el-table-column>
            <el-table-column
              prop="val"
              header-align="center"
              align="center"

              :label="'本期('+currentUnit+')'"
            >
              <template slot-scope="scope">{{scope.row.val}}</template>
            </el-table-column>
            <el-table-column
              prop="tqVal"
              header-align="center"
              align="center"
              :label="'同期('+currentUnit+')'"
            >
              <template slot-scope="scope">{{scope.row.tqVal}}</template>
            </el-table-column>
            <el-table-column
              prop="hqVal"
              header-align="center"
              align="center"
              :label="'环期('+currentUnit+')'"
            >
              <template slot-scope="scope">{{scope.row.hqVal}}</template>
            </el-table-column>
            <el-table-column
              prop="tb"
              header-align="center"
              align="center"
              label="同比(%)"
            >
              <template slot-scope="scope">{{scope.row.tb}}</template>
            </el-table-column>
            <el-table-column
              prop="hb"
              header-align="center"
              align="center"
              label="环比(%)"
            >
              <template
                slot-scope="scope"
              >{{scope.row.hb}}</template>
            </el-table-column>
            <el-table-column
              prop="date"
              header-align="center"
              align="center"
              label="日期"

            >
              <template slot-scope="scope">{{scope.row.date}}</template>
            </el-table-column>
          </el-table>

        </div>
      </el-main>
    </el-container>
  </div>
  </d2-container>
</template>

<script>
import * as Util from "@/utils";
import Config from "@/utils/config"
import * as Echarts from 'echarts'
import Minix from './mixin'
export default {
  name: "type",
  mixins:[Minix],
  props:{
    search:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      Config:Config,
      showTree:false,
      dataForm: {
        date:'',
        dateType:'',
        energyType:'',
        subEnergyType:'',//分项选择值
      },
      page: {
        page: 1,
        total: 0,
        size: 10
      },
      menuListTreeProps: {
        label: "buildingName",
        children: "children"
      },
      dataList: [],
      showInfo: false,
      currentbuildInfo: {
        buildingName:'',
      },
      powerList:[],
      pieChart:{
        chart:'',
        legendName:[],
        data:[],
      },
      businessChart:{
          chart:"",
          x:[],
          legendName:[],
          data:[],
      },
      showchart:true,
      meterTypeList:[],
      meterTypeParamValueList:[],//分项选择列表值
      meterdataList:[],
      businessChartThree:{
        legendData:{right:140,data: ['同期', '本期', '同比']},
        xAxisData:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yAxisName:['单位 kw/h','比率'],
        data:{
          d1: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          d2:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          d3: [2.0, -2.2, 3.3, -4.5, 6.3, -5.2, 10.3, 13.4, 11.0, 11.5, 12.0, 6.2]
        }
      },
      currentUnit:'',
      dataListLoading:false,
    };
  },
  computed: {
    containerHeight() {
      return Util.getClientHeight() - 143;
    },
    bottomChartHeight(){
      return Util.getClientHeight() - 340;
    }
  },
  created() {
    this.dataForm.dateType=Config.searchDate[0].date;
    this.$nextTick(()=>{
      this.queryStatic("METER_TYPE",null,data=>{
        if (data && data.code === 0) {
          this.meterTypeList = data.page
          this.dataForm.energyType = data.page[0].paramKey;
          this.currentUnit = data.page[0].paramExt;
          this.getDataList();
        } else {
          this.meterTypeList = []
        }
      });
    })
  },
  methods: {
    /**
     * 获取参数枚举
     */
    queryStatic(type,paramValue,callback) {
      let params = {
        'code': type ,
        "customerId": this.$util.cookies.get("customer_id")
      }
      if(paramValue){
        Object.assign(params,{paramValue,paramValue});
      }
      this.$api.sysstaticdatagetList(params).then((data) => {
        if(callback){
          callback(data);
        }
      });
    },
    deptogglePanel (event) {
      event || (event = window.event)
      event.stopPropagation
        ? event.stopPropagation()
        : (event.cancelBubble = true)
      this.showTree ? this.dephide() : this.depshow()
    },
    depshow () {
      this.showTree = true;
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephide () {
      this.showTree = false
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephidePanel (e) {
      if (
        this.$refs.suoShuMenTree &&
        !this.$refs.suoShuMenTree.contains(e.target)
      ) {
        this.dephide()
      }
    },
    initDepartPieChart(){
      let option = {
          grid:{
            x:10,
            y:10,
            x2:15,
            y2:15,
          },
          title:{
            text:`分类用${this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}).paramValue}占比`,
            show:true,
            left:'center',
            textStyle:{
                color:"#ccc",
                fontSize:14,
                fontFamily:"MicrosoftYaHei",
                lineHeight:14,
            },
            padding:0,
          },
          tooltip: {
              trigger: 'item',
              formatter: '{b}: {c}'+this.currentUnit+' ({d}%)'
          },
          legend: {
              orient: 'horizontal',
              bottom :-2,
              type:'scroll',
              left: 10,
              data: this.pieChart.legendName
          },
          series: [
              {
                  name: '用能量',
                  type: 'pie',
                  radius: ['20%', '80%'],
                  center: ['45%', '48%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center',
                      normal: {
                        position: 'inner',
                        show : false
                      }
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: this.pieChart.data,
              }
          ],
        color:['#708DE5','#2BD597','#F6AD35','#66997B','#AA9AFF']
      };
      this.pieChart.chart = Echarts.init(document.getElementById('departChart'));
      this.pieChart.chart.setOption(option);
    },
    selectBuild (data, checked, indeterminate) {
       if(checked){
     //   console.log(this.$refs.buildTree);
        this.$refs.buildTree.setCheckedNodes([]);
        this.currentbuildInfo = data;
        this.$refs.buildTree.setChecked(data.buildingId,checked);
        this.showTree = false
      }
    },
    // 获取数据列表
    getDataList() {
      this.$api.getBuildings({
          page: this.page.pageIndex,
          limit: this.page.pageSize,
          key: this.dataForm.key,
          customerId: this.$util.cookies.get("customer_id"),
          projectid: this.$util.cookies.get("cuuren_projectId")
      }).then((data) => {
        if (data && data.code === 0) {

          this.dataList = Util.treeDataTranslate(
            data.menuList,
            "buildingId",
            "parentBuildingId"
          );
          if(this.search){
            this.currentbuildInfo = (data.menuList&&data.menuList.length>0)?data.menuList.find(item=>item.parentBuildingId==-1):{};
            this.selectBuild(this.currentbuildInfo,true);
          }
          else{
            this.currentbuildInfo = (data.menuList&&data.menuList.length>0)?data.menuList.find(item=>item.parentBuildingId==-1):{};
          }
          this.getPowerDataList();
        } else {
          this.dataList = [];
        }
      });
    },
    changeShowType(){
      this.showchart = !this.showchart;
    },
    dealDataList(data){
      //柱状图
      this.businessChart.legendName = [];
      this.businessChart.data = [];
      this.businessChart.x = [];
       //饼图
      this.pieChart.legendName=[];
      this.pieChart.data=[];
      //分项下拉框
      this.meterTypeParamValueList = [];
      this.meterdataList = [];
      //同比分析图
      data.forEach((ele,index)=>{
        //分项下拉框
        this.meterTypeParamValueList.push({
          name:ele.itemName,
          id:ele.itemValue,
        })
        //初始化选中第一分项
        if(index==0){
          this.dataForm.subEnergyType = ele.itemValue;
        }
        //饼图
        this.pieChart.legendName.push(ele.itemName);
        //同比分析图
        this.pieChart.data.push({
          value:ele.totalVal,
          name:ele.itemName,
        })
        //柱状图
        this.businessChart.legendName.push({
          name:ele.itemName,
          icon: 'circle',
        });
        ele.val = [];
        //表格数据
        let idx = 0;
        let datatype = Config.searchDate.find(item=>item.date==this.dataForm.dateType).typeDesc
        if(datatype==='1'){
          this.businessChart.x = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
          ele.val = [0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0];
        }else if(datatype==='2'){
          this.businessChart.x = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
          ele.val = [0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0, 0];
        }else if(datatype==='3'){
          this.businessChart.x =['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
          ele.val = [0,0,0,0,0, 0,0,0,0,0, 0,0];
        }

        ele.detailList.forEach(element=>{
          // if(index==0){
          //   this.businessChart.x.push(element.dateDetail);
          // }
         // ele.val.push(element.val);
          ele.val[parseInt(element.dateDetail)-(datatype==='1'?0:1)] = element.val
          idx++;
          let tb = 0,hb=0;
          if(element.tqVal>0){
            tb = ((element.val-element.tqVal)/element.tqVal*100).toFixed(0);
          }
          if(element.hqVal>0){
            hb = ((element.val-element.hqVal)/element.hqVal*100).toFixed(0);
          }
          //表格数据
          this.meterdataList.push({
            id:idx,
            buildingName:this.currentbuildInfo.buildingName,
            energyTypeName:this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}).paramValue,
            subEnergyTypeName:ele.itemName,
            val:element.val,
            tqVal:element.tqVal,
            hqVal:element.hqVal,
            tb:tb,
            hb:hb,
            date:(this.dataForm.date&&this.dataForm.date!="")?this.formarDateStr(this.dataForm.dateType,new Date(this.dataForm.date)):'',
          })
        })
        if(index==data.length-1){
          this.businessChart.data.push({
            name:ele.itemName,
            stack:'用能',
            type:'bar',
            data:ele.val,
            itemStyle:{
                  normal: {
                      barBorderRadius:[12,12,0,0]
                  }
            },
          })
        }
        else{
          this.businessChart.data.push({
            name:ele.itemName,
            stack:'用能',
            type:'bar',
            data:ele.val,
          })
        }
      });
      //饼图
      this.initDepartPieChart();
      //柱状图
      this.initBarChart()
    },
    initBarChart(){
      if(this.businessChart.chart){
        this.businessChart.chart.clear();
      }
      let tooltipformat =  '{a}:{c}'+this.currentUnit+'<br />';
      if(this.businessChart.data.length>1) {
        tooltipformat ='{b} '+ Config.searchDate.find(item=>item.date==this.dataForm.dateType).detailUnit+'<br/>'
        for (let i = 0; i < this.businessChart.data.length; i++) {
          tooltipformat += '{a' + i + '}:{c' + i + '}' + this.currentUnit + '<br />'
        }
      }
      let option={
          grid:{
            x:50,
            y:30,
            x2:5,
            y2:25,
          },
          title:{
            text:'用'+this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}).paramValue+'情况',
            show:true,
            left:'35%',
            textStyle:{
                color:"#ccc",
                fontSize:14,
                fontFamily:"MicrosoftYaHei",
                lineHeight:14,
            },
            padding:[0,50,0,0],
          },
          tooltip: {
              trigger: 'axis',
              formatter: tooltipformat,
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend:{
            show:true,
            right:30,
            top:-5,
            data:this.businessChart.legendName,
          },
          xAxis:{
              type:'category',
              data:this.businessChart.x,
              axisLine:{
                  lineStyle:{
                      color:"#2C73D2",
                      type:'solid',
                      width:0.5
                  },
              },
              axisLabel:{
                  color:"#ccc",
                  interval:0,
              },
              axisTick: {
                  show:false,
                  alignWithLabel: true
              }
          },
          yAxis:{
            name:'单位:'+this.currentUnit,
            type:'value',
            axisLabel:{
                color:"#ccc",
                formatter: function (a) {
                  return a >= 10000 ? echarts.format.addCommas(a / 1000) + 'k' : a;
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#ccc",
                    type:'soild',
                    opacity:0,
                }
            },
            axisTick: {
                show:false,
                alignWithLabel: true
            },
            splitLine:{
                lineStyle:{
                    color:"#2C73D2",
                    type:"dotted",
                    opacity:0.5,
                }
            },
          },
          series:this.businessChart.data,
            color:['#708DE5','#2BD597','#F6AD35','#66997B','#AA9AFF']
      }
      this.businessChart.chart = Echarts.init(document.getElementById('typeDetailChart'));
      this.businessChart.chart.setOption(option);
    },
    initBarChartThree(flag){
      this.businessChartThree.yAxisName = ['单位:'+this.currentUnit,'比率:%'];
      this.businessChartThree.legendData.data = [];
      let color=['#2BD597','#708DE5','#F6AD35'];
      this.businessChartThree.legendName = [];
      if(flag==1){
        this.businessChartThree.legendData.data.push('同期');
        this.businessChartThree.legendData.data.push('本期');
        this.businessChartThree.legendData.data.push('同比');
      }
      else{
        color = ['#35e2cc','#708DE5','#a76a0b'];
        this.businessChartThree.legendData.data.push('环期');
        this.businessChartThree.legendData.data.push('本期');
        this.businessChartThree.legendData.data.push('环比');
      }
      this.businessChartThree.legendName.push({})
      this.businessChartThree.data.d1=[];
      this.businessChartThree.data.d2=[];
      this.businessChartThree.data.d3=[];
      this.businessChartThree.xAxisData = [];
      this.powerList.forEach(ele=>{
        if(ele.itemValue==this.dataForm.subEnergyType){
          ele.detailList.forEach(element=>{
             this.businessChartThree.data.d2.push(element.val);
             this.businessChartThree.xAxisData.push(element.dateDetail);
             if(flag==1){
                this.businessChartThree.data.d1.push(element.tqVal);
                if(element.tqVal==0){
                  this.businessChartThree.data.d3.push(0);
                }
                else{
                  this.businessChartThree.data.d3.push(((element.val-element.tqVal)/element.tqVal*100).toFixed(0));
                }
             }
             else{
               this.businessChartThree.data.d1.push(element.hqVal);
                if(element.hqVal==0){
                  this.businessChartThree.data.d3.push(0);
                }
                else{
                  this.businessChartThree.data.d3.push(((element.val-element.hqVal)/element.hqVal*100).toFixed(0));
                }
             }
          })

        }
      })

      let vm = this;
      let option={
          grid:{
              x:50,
              y:25,
              x2:35,
              y2:25,
              top:60,
          },
          title:{
              text:'用'+this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}).paramValue+'平衡走势',
              show:true,
              left:'35%',
              textStyle:{
                  color:"#ccc",
                  fontSize:14,
                  fontFamily:"MicrosoftYaHei",
                  lineHeight:14,
              },
              padding:5,
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{a0}:{c0}'+this.currentUnit+"</br>{a1}:{c1}"+this.currentUnit+"</br>{a2}:{c2}%",
            axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              }
            }
          },
          toolbox: {
            show: true,
            right:30,
            feature: {
              myTool1: {    //必须要my开头
                show: true,
                title: '同比',
                iconStyle: {
                  borderColor: 'green'
                },
                icon:'image://',
                onclick: function (){
                  vm.initBarChartThree(1);
                }
              },
              myTool2: {    //必须要my开头
                show: true,
                title: '环比',
                iconStyle: {
                  borderColor: 'green'
                },
                icon:'image://',
                onclick: function (){
                   vm.initBarChartThree(2);
                }
              }
            }
          },
          legend: this.businessChartThree.legendData,
          xAxis: [
              {
                type: 'category',
                data: this.businessChartThree.xAxisData,
                axisPointer: {
                  type: 'shadow'
                }
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: this.businessChartThree.yAxisName[0],
                  // min: 0,
                  // max: 250,
                  // interval: 50,
                  axisLabel: {
                      formatter: function (a) {
                        return a >= 10000 ? echarts.format.addCommas(a / 1000) + 'k' : a;
                      }
                  }
              },
              {
                  type: 'value',
                  name: this.businessChartThree.yAxisName[1],
                  // min: 0,
                  // max: 25,
                  // interval: 5,
                  axisLabel: {
                    formatter: '{value}'
                  }
              }
          ],
          series: [
              {
                name: this.businessChartThree.legendData.data[0],
                type: 'bar',
                data: this.businessChartThree.data.d1,
                itemStyle:{
                  normal: {
                    barBorderRadius:[14,14,0,0],
                  },
                },
              },
              {
                name:  this.businessChartThree.legendData.data[1],
                type: 'bar',
                data: this.businessChartThree.data.d2,
                itemStyle:{
                  normal: {
                    barBorderRadius:[14,14,0,0],
                  },
                },
              },
              {
                name:  this.businessChartThree.legendData.data[2],
                type: 'line',
                yAxisIndex: 1,
                data:this.businessChartThree.data.d3
              }
          ],
        color:color
      }
      this.businessChartThree.chart = Echarts.init(document.getElementById('statEchart'));
      this.businessChartThree.chart.setOption(option);
    },
    /**
     * 查询数据
     * */
    getPowerDataList() {
      this.$api.subitemlist({
            buildingId: this.currentbuildInfo.buildingId,
            date: (this.dataForm.date&&this.dataForm.date!="")?this.formarDate(this.dataForm.dateType,new Date(this.dataForm.date)):'',
            dateType: Config.searchDate.find(item=>item.date==this.dataForm.dateType).typeDesc,
            meterType: this.dataForm.energyType,
            customerId: this.$util.cookies.get("customer_id"),
            projectid: this.$util.cookies.get("cuuren_projectId")
      }).then((data ) => {
        if (data && data.code === 0) {
          this.powerList = data.data;
          this.dealDataList(data.data);
          this.initBarChartThree(1);
        }
      })
    },
    exoprtData(){
      // 导出数据
      let header=['序号','区域名称','分类','分项','本期用能('+this.currentUnit+')','同期用能('+this.currentUnit+')','环期用能('+this.currentUnit+')','同比比率(%)','环比比率(%)','时间']
      let props=['id','buildingName','energyType','subEnergyTypeName','val','tqVal','hqVal','tb','hb','date']
      let fileName=`分项用${ this.meterTypeList.find(item=>item.paramKey==this.dataForm.energyType).paramValue}统计`
      this.export2Excel(header,props,fileName,this.meterdataList);
    },
  },
  watch:{
    'dataForm.energyType':function (newValue,oldValue){
      this.currentUnit = this.meterTypeList.find(item=>{return item.paramKey==this.dataForm.energyType}).paramExt;
     // this.getPowerDataList();
    },
    'dataForm.subEnergyType':function(newVal,oldVal){
      this.initBarChartThree(1);
    }

  }
};
</script>

<style scoped>
  .range-search{
    padding: 10px 0px;
    border-bottom: 1px solid #f9f5f5;
    border-top: 1px solid #f9f5f5;
    margin:0px 25px;
    margin-bottom: 10px;
  }
  .type-card{
    height: 60px;
    text-align:center;
    line-height: 25px;
  }
  .type-card .num{
    font-size:1.2 rem;
    word-break: break-all;
  }
  .search{
    padding: 20px 0px 5px 0px;
    border: 1px solid #f9f5f5;
    border-left: none;
    border-right: none;
  }
  .el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label{
    line-height: 27px;;
  }
  .device {
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    width: 100%;
    color: #8a8c8e;
    /* border: 1px solid #d9ecff; */
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .actived {
    /* background-color: #65acd0; */
    /* color: #f7f6f6; */
    color: #4c4b4b;
  }
  .show-device {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
    cursor: pointer;
    padding-right: 20px;
  }
  .tree-area { background-color: rgba(0, 0, 0, 0.1);
    width: 200px !important;
    /* box-shadow: 0px 0px 2px 2px #f7f6f6; */
    padding-top: 10px;
  }
  .bg-white {
    box-shadow: 0px 0px 2px 2px #f7f6f6;
    height: 100%;
  }
  .el-tree-node__content {
    height: 30px !important;
  }
  .busi-chart{
      width: 100%;
      height: 30%;
      margin-top: 10x;
  }
  .objectTree {
      margin-left: 89px;
      position: absolute;
      overflow: auto;
      z-index: 100;
      height: 200px;
      /* border: 1px solid #ddd; */
      line-height: normal;
      z-index: 204;
      box-shadow: 0px 0px 1px 1px #e2dfdf;
      margin-top: 3px;
      border-radius: 4px;
    background-color: white;
  }
  .w-160{
    width: 160px
  }
</style>
